<template>
    <div class="h-full p-4 flex flex-col bg-gray-500">
        <div class="w-full h-full flex justify-center items-center p-5">
            <a-form ref="formRef" :layout="state.layout" :model="formData" style="width: 400px; padding: 60px 40px 40px 40px; background: rgba(255, 255, 255, 0.2)">
                <div class="grid grid-cols-1 gap-2">
                    <a-form-item label="" name="code" :rules="[{ required: true, message: '请填写钉钉登录码' }]">
                        <d-input placeholder="code码" v-model:value="formData.code" />
                    </a-form-item>
                    <a-button class="mt-2" size="large" type="primary" @click="onSubmit">登录</a-button>
                </div>
            </a-form>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { getUserInfo } from '../../javascript/request/dingtalk'
let state = reactive({
    formRef: undefined,
    code: undefined,
    layout: 'horizontal',
    formData: {},
    store: useStore(),
    router: useRouter(),
})
const onSubmit = () => {
    state.formRef.validateFields().then(values => {
        getUserInfo(values.code, true).then(res => {
            state.router.replace('/')
        })
    })
}

const { formData, formRef } = toRefs(state)
</script>
